<template>
  <el-card class="box-card">
    <el-row :span="24">
      <!-- <el-col :span="6">
        <el-select
          v-model="value"
          class="m-2"
          placeholder="Select"
          size="medium"
          style="width: 240px"
          @change="selectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col> -->

      <!-- <el-col :span="6">
                  <el-input v-model="searchData" placeholder="请输入培训班级名称" />
      </el-col>
                <el-col :span="4">
                    <el-button type="primary" round @click="searchClass">搜索</el-button>
                </el-col> -->
      <el-col :span="6">
        <el-button type="primary" @click="dialogVisible = true">加入班级</el-button>
      </el-col>
      <!-- <el-col :span="2">
                    <el-icon style="margin-top: 10px;" color="#ffc107" @click="alertVisible = true"><InfoFilled /></el-icon>
                </el-col> -->
    </el-row>
    <el-dialog v-model="dialogVisible" title="加入班级">
      <template #default>
        邀请码：<el-input v-model="Invitecode" placeholder="请输入培训班级邀请码" />
        <el-dialog
          v-model="innerVisible"
          width="30%"
          title="提示"
          append-to-body
        >
        <span v-if="Ifcode">{{inviteMessage}}</span>
        </el-dialog>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleOk">确认</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="alertVisible" title="加入班级">
      <perfect-scrollbar> <v-md-preview style="height: calc(50vh)" :text="text"></v-md-preview></perfect-scrollbar>

    </el-dialog>
    <el-table :data="tableData.data" stripe style="width: 100%">
      <el-table-column prop="id" label="班级号" width="220" />
      <el-table-column prop="name" label="培训班级" width="220" align="center">
        <template #default="scope">
              <el-tooltip content="点击查看培训班作业" placement="top">
                  <span class="col2-cell-style"
                        @click="viewNClassByTClass(scope.$index)">{{scope.row.name}}</span>
              </el-tooltip>
          </template>
      </el-table-column>
      <el-table-column prop="teacher" label="培训老师" width="220" />
      <el-table-column prop="createTime" label="创建时间" width="300" />
    </el-table>
    <Pagination :currentPage="currentPage" :pageSize="pageSize" :total="total"
                    :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></Pagination>
  </el-card>
</template>

<script setup>
import { reactive ,ref,onMounted} from "vue";
import { useRouter } from "vue-router";
import API from '../api/trainer'
import Pagination from '@/components/Pagination.vue'
import { ElMessage,ElMessageBox  } from 'element-plus'
onMounted(() => {

  getTrainerClass()
})
{
  Pagination
}
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)
    function handleSizeChange(val) {
        pageSize.value = val;
        getTrainerClass()
    }
    function handleCurrentChange(val) {
        currentPage.value = val;
        getTrainerClass()
    }
    const router = useRouter();
    const inviteMessage = ref('')
    const tableData = reactive({data:[]});
        // 查看作业
    function viewNClassByTClass(index){
      console.log(tableData.data[index])
      localStorage.setItem("tClass",JSON.stringify(tableData.data[index]))
      router.push({ path: "/showhomework" });
    }
    function viewHomework(row) {
      localStorage.setItem("tClass",JSON.stringify(row));
      router.push({ path: "/showhomework" });

    }
    function getTrainerClass(){
      let token = localStorage.getItem('token').toString()
      let getTrainClassparam ={
            "pageNumber": currentPage.value,
            "pageSize": pageSize.value
      }
      //获取班级
      API.getTrainClass(getTrainClassparam,token).then((res) => {
                  console.log(getTrainClassparam)
                  console.log(res)
                    if (res.data === 'Unauthorized' || res.data === 'Forbidden') {
                        router.push({path: '/home'});
                        return;
                    }
                    if (res.data.success) {
                      tableData.data = res.data.content.records
                      total.value = res.data.content.total
                      ElMessage.success("请求班级成功")
                    }
                    if(res.data.success==false){
                      ElMessage.error("请求班级失败，请联系管理员")
                    }
                }).catch((err) => {
                    console.log(err);
                });
    }
    function searchClass(){
      let token = localStorage.getItem('token').toString()
      let getTrainClassparam ={
            "pageNumber": currentPage.value,
            "pageSize": pageSize.value,
            "name" : searchData.value
      }
      API.getTrainClass(getTrainClassparam,token).then((res) => {
                  console.log(getTrainClassparam)
                  console.log(res)
                    if (res.data === 'Unauthorized' || res.data === 'Forbidden') {
                        router.push({path: '/home'});
                        return;
                    }
                    if (res.data.success) {
                      tableData.data = res.data.content.records
                      total.value = res.data.content.total
                      ElMessage.success("请求班级成功")
                    }
                    if(res.data.success==false){
                      ElMessage.error("请求班级失败，请联系管理员")
                    }
                }).catch((err) => {
                    console.log(err);
                });
    }
    // 选择分类
    const value = ref('ALL')
    const options = [
      {
        value: 'ALL',
        label: '所有培训',
      },
      {
        value: 'Myclass',
        label: '已加入培训',
      },
    ]
    function selectChange(){
      console.log(value.value)

    }

    //查找班级
    const searchData = ref('')

    // 弹窗
    const dialogVisible = ref(false)
    const Invitecode = ref('')
    function handleOk(){
      let token = localStorage.getItem('token').toString()
      let joinClassparam = {"inviteCode": Invitecode.value}
      // 发请求向后端确认
      API.joinClass(joinClassparam,token).then((res) => {
                  console.log(joinClassparam)
                  console.log(res)
                    if (res.data === 'Unauthorized' || res.data === 'Forbidden') {
                        router.push({path: '/home'});
                        return;
                    }
                    if (res.data.success) {
                      inviteMessage.value = "你已成功加入班级"
                      Ifcode.value = true
                      innerVisible.value = true
                    }
                    if(res.data.success==false){
                      inviteMessage.value = res.data.message
                      Ifcode.value = true
                      innerVisible.value = true
                    }
                }).catch((err) => {
                    console.log(err);
                });
      }

    // 嵌套弹窗
    const innerVisible = ref(false)
    const Ifcode = ref(false)
    const tipDialogVisible = ref(false)

    // 注意事项
    const alertVisible = ref(false)
    const text = INSTRUCTIONS
</script>

<style scoped>
.col2-cell-style {
  color: #409eff;
  cursor: pointer;
}
.box-card {
  width: 70%;
  margin-top: 20px;
  margin-left: 15%;
}
</style>
